<template>
  <div class="main">
    <el-tabs v-model="activeName">
      <el-tab-pane label="demo1" name="demo1" lazy>
        <Demo1 />
      </el-tab-pane>
      <el-tab-pane label="demo2" name="demo2" lazy>
        <Demo2 />
      </el-tab-pane>
      <el-tab-pane label="demo3" name="demo3" lazy>
        <Demo3 />
      </el-tab-pane>
      <el-tab-pane label="demo4" name="demo4" lazy>
        <Demo4 />
      </el-tab-pane>
      <el-tab-pane label="demo5" name="demo5" lazy>
        <Demo5 />
      </el-tab-pane>
      <el-tab-pane label="demo6" name="demo6" lazy>
        <Demo6 />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
  import Demo1 from "./components/demo1.vue";
  import Demo2 from "./components/demo2.vue";
  import Demo3 from "./components/demo3.vue";
  import Demo4 from "./components/demo4.vue";
  import Demo5 from "./components/demo5.vue";
  import Demo6 from "./components/demo6.vue";

  export default {
    name: "",
    components: {
      Demo1,
      Demo2,
      Demo3,
      Demo4,
      Demo5,
      Demo6,
    },
    computed: {},
    data() {
      return {
        activeName: "demo3",
      };
    },
    methods: {

    },
  };
</script>

<style scoped lang="scss">
  .main {
    background: #fff;
    height: 100%;
  }

  :deep(.el-tabs) {
    height: calc(100% - 40px);
  }

  :deep(.el-tabs__content) {
    height: 100%;
  }

  :deep(.el-tab-pane) {
    height: 100%;
  }

  :deep(.el-tabs__header) {
    margin: 0;
    padding-left: 10px;
  }
</style>